<!-- 订单详情 -->
<template>
	<!-- <view class="right-content"> -->
	<view>
		<view v-if="!isAfterSales">
			<view class="right-title">
				<uni-icons class="uniIcons" type="back" size="20" @click="goBack"></uni-icons>
				订单详情
			</view>
			<!-- 订单列表 -->
			<view class="order-table">
				<view class="order-detail-container">
					<!-- 订单基本信息 -->
					<view class="product-info">
						<view class="section-title">
							<text class="">订单信息</text>
							<text class="orderTime">下单时间：{{ msToDateTime(orderLi.create_date) }}</text>
							<!-- <text class="remainingTime">剩余等待时间：{{ countdown }}</text> -->
						</view>
						<view class="product-item">
							<view class="product-desc">
								<text class="product-model">订单编号：{{ orderDetail.order_no }}</text>
								<text
									class="product-quantity">订单状态：{{ orderDetail.status[orderDetail.status.length-1].text }}</text>
								<text class="product-quantity">订单原价：<text class="product-money">
										<text class="product-money1">￥</text>{{orderDetail.goods.totalPrice}}</text>
								</text>
								<text class="product-quantity">邮费：<text class="product-money">
										<text class="product-money1">￥</text>{{orderDetail.postage}}</text>
								</text>
								<text class="product-quantity">订单总金额：<text class="product-money">
										<text class="product-money1">￥</text>{{orderDetail.pay_total_price}}</text>
								</text>
								<text class="product-quantity product-quantity">订单备注：{{orderDetail.notes}}</text>
							</view>
						</view>
					</view>

					<!-- 收货人信息 -->
					<view class="shipping-info">
						<text class="section-title">收货人信息</text>
						<view class="info-item">
							<text class="label">姓名:</text>
							<text class="value">{{ orderDetail.address.name }}</text>
						</view>
						<view class="info-item">
							<text class="label">联系电话:</text>
							<text class="value">{{ orderDetail.address.mobile }}</text>
						</view>
						<view class="info-item">
							<text class="label">收货地址:</text>
							<text class="value">
								{{ orderDetail.address.area[0].text }}
								{{ orderDetail.address.area[1].text }}
								{{ orderDetail.address.area[2].text }}
								{{ orderDetail.address.address }}
							</text>
						</view>
					</view>

					<!-- 发票 -->
					<view class="order-amount" v-show="orderDetail.invoice.title">
						<text class="section-title">发票信息</text>
						<view class="amount-item">
							<text class="label">发票类型:</text>
							<text class="value">{{orderDetail.invoice.type===1?'增值税专用发票':'增值税普通发票'}}</text>
						</view>
						<view class="amount-item">
							<text class="label">发票抬头:</text>
							<text class="value">{{orderDetail.invoice.title}}</text>
						</view>
						<view class="amount-item">
							<text class="label">收票邮箱:</text>
							<input :class="[isDisabled?'':'uni-input']" :disabled="isDisabled"
								v-model="orderDetail.invoice.email" focus placeholder="请输入收票邮箱" />
							<!-- <button class="mini-btn" @click="editEmail" size="mini">{{isDisabled?'修改':'确认'}}</button> -->
							<text class="butText" @click="editEmail">{{isDisabled?'修改邮箱':'确认'}}</text>
							<!-- <button :class="['iconfont',isDisabled?'icon-xinpin2':'icon-tuihuanhuo','mini-btn']" @click="editEmail" size="mini"></button> -->
							<!-- <uni-tooltip class="item" content="编辑" placement="bottom">
								<view :class="['iconfont',isDisabled?'icon-xinpin2':'icon-tuihuanhuo','mini-btn']"></view>
							</uni-tooltip> -->

							<!-- <button class="iconfont icon-xinpin2 mini-btn" @click="editEmail" size="mini"></button> -->
							<!-- <text class="value">123456789@qq.com</text> -->
						</view>
					</view>
					<!-- 产品信息 -->
					<view class="product-info">
						<text class="section-title">产品信息</text>

						<uni-table ref="table" border stripe emptyText="暂无更多数据">
							<uni-tr>
								<uni-th width="150" align="center">产品信息</uni-th>
								<uni-th width="150" align="center">数量</uni-th>
								<uni-th width="150" align="center">单价</uni-th>
								<uni-th width="150" align="center">小计</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in orderDetail.goods.cartList" :key="index">
								<uni-td align="center">
									<view class="information">
										<view class="td-img">
											<image src="/static/carousel04.png" mode="aspectFill"></image>
										</view>
										<view class="introduce">
											<view class="introduce-name">{{item.goods_title}}{{item.param.model}}</view>
											<view class="introduce-model">产品型号：{{item.param.specs}}</view>
										</view>
									</view>
								</uni-td>
								<uni-td align="center">{{item.param.number}}</uni-td>
								<uni-td align="center">{{item.param.price}}</uni-td>
								<uni-td align="center">{{item.param.total_price}}</uni-td>
							</uni-tr>
						</uni-table>
						<!-- <view class="product-item">
							<image :src="orderDetail.productImg" mode="aspectFill" class="product-img" />
							<view class="product-desc">
								<text class="product-model">{{ orderDetail.productName }}</text>
								<text class="product-model">产品型号：{{ orderDetail.productModel }}</text>
								<text class="product-quantity">单价：￥152</text>
								<text class="product-quantity">数量：{{ orderDetail.quantity }}</text>
								<text class="product-quantity">总价：￥453</text>
							</view>
						</view> -->

					</view>
				</view>

			</view>

			<!-- 操作按钮 -->
			<!-- <view class="operation-buttons">
				<button class="cancel-btn" @click="afterSales">申请售后</button>
				<button class="pay-btn">评价</button>
			</view> -->
		</view>
		<!-- 申请售后 -->
		<afterSales v-if="isAfterSales" @back="backAfterSales"></afterSales>
	</view>
	<!-- </view> -->
</template>

<script>
	import tableData from '/pages/test1/tableData.js'
	import {
		updateOrderEmail
	} from '../../utils/http_data.js';
	export default {
		name: "orderDetails",
		data() {
			return {
				orderDetail: {
					orderNo: 'GS15250506064',
					createTime: '2025-05-06 10:24:54',
					status: '待付款',
					remainingTime: '01时49分10秒',
					productImg: '/static/carousel04.png',
					productName: '固定式薄片安装座，嵌入式安装，M4螺孔',
					productModel: 'FMS-IF',
					quantity: 2,
					price: 232,
					totalPrice: 464,
					shippingFee: 0,
					coupon: 0,
					finalPrice: 464,
					receiver: '张先生',
					phone: '138****1234',
					address: '北京市海淀区中关村大街1号',
					email: '1212121@qq.com',
				},
				tableData: [], // 产品表格数据
				isDisabled: true, // 是否开启禁用

				totalSeconds: 3 * 24 * 60 * 60 + 0 * 60 * 60 + 0 * 60 + 0,
				countdown: '',

				// 申请售后
				isAfterSales: false, // 申请售后页面是否显示
			};
		},
		props: {
			orderData: {
				type: Array, // 数字类型 订单详情数据
				required: false, // 必填项
				default: null // 默认值
			},
		},
		mounted() {
			// 实际项目中应根据订单ID从服务器获取详情
			console.log('传入的订单详情数据：', this.orderData);
			this.orderDetail = JSON.parse(JSON.stringify(this.orderData))
		},
		methods: {
			msToDateTime(input) {
				const date = new Date(input); // 初始化Date对象，支持毫秒数或ISO格式字符串
				if (isNaN(date.getTime())) { // 检查日期是否有效
					throw new Error('无效的时间输入，请提供毫秒数或ISO格式时间字符串');
				}
				const padZero = (num) => num.toString().padStart(2, '0'); //补零函数：确保月份/日期/时分秒为两位数（如1→01）

				const year = date.getFullYear();
				const month = padZero(date.getMonth() + 1);
				const day = padZero(date.getDate());
				const hour = padZero(date.getHours());
				const minute = padZero(date.getMinutes());
				const second = padZero(date.getSeconds());

				// 4. 拼接格式
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
			backAfterSales(val) {
				this.isAfterSales = val;
			},
			afterSales() {
				this.isAfterSales = true;
			},

			// 返回
			goBack() {
				this.$emit('back', false)
			},
			// 编辑邮箱
			editEmail() {
				if (this.isDisabled) {
					this.isDisabled = false;
				} else {
					console.log('email：',this.orderDetail.invoice.email)
					const email = this.validateEmail(this.orderDetail.invoice.email)
					console.log(email)
					if (email) {
						console.log(this.orderDetail._id)
						updateOrderEmail(this.orderDetail._id, this.orderDetail.invoice)
							.then(result => {
								console.log(result.message);
								this.isDisabled = true;
								uni.showToast({
									icon: 'none',
									title: '修改成功',
									duration: 2000
								});
							})
							.catch(error => {
								console.error('修改失败:', error.message);
							});


					} else {
						uni.showToast({
							icon: 'none',
							title: '请正确填写邮箱地址',
							duration: 2000
						});
					}
				}
			},
			// 验证邮箱
			validateEmail(email) {
				const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				return emailRegex.test(email);
			},
		}
	}
</script>

<style scoped>
	.right-content {
		width: 1200px;
		height: 800px;
		padding: 10px 20px;
		box-sizing: border-box;
		background: #fff;
		margin-left: 20px;
		border-radius: 10px;
	}

	.uniIcons {
		cursor: pointer;
	}

	.right-title {
		width: 100%;
		min-height: 50px;
		border-radius: 25px;
		/* background: #E5E5E5; */
		/* background-image: linear-gradient(45deg, #e60012, #f3a73f); */
		color: #41250e;
		padding: 0 5px 0 15px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		font-size: 16px;
	}

	.order-table {
		/* border: 1px solid #e5e5e5; */
		height: 660px;
		border-radius: 8px;
		overflow-y: auto;
		font-size: 14px;
	}

	/* 订单详情 */
	.order-detail-container {
		padding: 2px 20px;
	}

	.order-base-info,
	.product-info,
	.order-amount,
	.shipping-info {
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 15px;
		/* padding: 10px 15px; */
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.info-item {
		display: flex;
		padding-left: 15px;
		margin-bottom: 4px;
	}

	.info-item:last-child {
		padding-bottom: 15px;
	}

	.label {
		width: 110px;
		color: #666;
	}

	.value {
		flex: 1;
		color: #666;
	}

	.red {
		color: #ff0000;
	}

	.section-title {
		font-weight: bold;
		margin-bottom: 10px;
		display: block;
		padding: 10px 15px;
		background-color: #F5F5F5;
	}

	.information {
		display: flex;
		border-bottom: 1px #EBEEF5 solid;
		padding: 8px 10px;
	}

	.information:last-child {
		border-bottom: 0 #EBEEF5 solid;
	}

	.introduce {
		width: 326px;
		text-align: left;
		margin-left: 30px;
	}

	.introduce-name {}

	.introduce-model {
		padding-top: 20px;
	}

	.td-img {
		width: 100px;
		height: 100px;
		margin: auto;
	}

	.td-img image {
		width: 100%;
		height: 100%;
	}


	.orderTime {
		margin-left: 140px;
		font-weight: 400;
	}

	.remainingTime {
		float: right;
		/* margin-left: 100px; */
		font-weight: 400;
		color: #D92400;
	}

	.product-item {
		display: flex;
		align-items: center;
	}

	.product-img {
		width: 100px;
		height: 100px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.product-desc {
		flex: 1;
		padding-left: 15px;
		margin-right: 15px;
		margin-bottom: 15px;
		box-sizing: border-box;
	}

	.product-model,
	.product-quantity {
		color: #666;
		display: block;
		margin-bottom: 4px;
		overflow-wrap: break-word;
		word-break: break-all;
	}

	.product-quantity1 {
		margin-top: 10px;
		font-size: 12px;
		color: #999;
	}

	.product-money {
		color: #D92400;
	}

	.product-money /deep/ .product-money1 {
		font-size: 13px;
	}

	.product-price {
		font-weight: bold;
	}

	.amount-item {
		display: flex;
		margin-bottom: 4px;
		padding-left: 15px;
		box-sizing: border-box;
	}

	.amount-item:last-child {
		padding-bottom: 10px;
	}

	.amount-item uni-button[size='mini'] {
		margin-left: 0;
		margin-right: 0;
	}

	.amount-item /deep/ .uni-tooltip-popup {
		width: 26px;
		background-color: rgba(255, 255, 255, 0);
		color: #000;
		padding: 0;
	}

	.butText {
		color: #c6231d;
		cursor: pointer;
		margin: 0 10px;
		line-height: 30px;
	}

	.butText:hover {
		text-decoration: underline;
	}

	.uni-input {
		height: 30px;
		margin-right: 6px;
		box-sizing: border-box;
		border: 1px solid #ccc;
		padding: 2px 10px;
		border-radius: 4px;
	}

	.total {
		font-weight: bold;
		margin-top: 15px;
	}

	.operation-buttons {
		width: 230px;
		display: flex;
		padding: 15px 0;
		float: right;
	}

	.operation-buttons button {
		/* margin-left: 15px; */
		/* padding: 10px 20px; */
		border-radius: 4px;
		font-size: 12px;
		background-color: #ff0000;
		color: #fff;
	}

	.operation-buttons uni-button {
		margin-left: 0;
		margin-right: 30px;
	}

	.pay-btn {}

	.cancel-btn {
		/* background-color: #f0f0f0; */
	}
</style>